<template>
  <div class="container">
    <div style="">
      <div class="card_nd_title">
        <span>实验室检测</span>
        <div class="line" style="width:80px;"></div>
      </div>

      <div class="content_box">
        <div class="card_content" v-if="report.sugarCheckDate">
          <div class="item">
            <span style="font-size: 16px;color: #000;">血糖检查</span>
          </div>
          <div>
            <a-row>
              <a-col class="item" :span="24" v-if="report.sugarCheckDate != null">
                检查日期： {{ report.sugarCheckDate }}
              </a-col>
              <a-col class="item" :span="24" v-if="report.sugarFasting != null">
                空腹血糖： {{ report.sugarFasting }}
              </a-col>
              <a-col class="item" :span="24" v-if="report.sugarRandom != null">
                随机血糖： {{ report.sugarRandom }}
              </a-col>
              <a-col class="item" :span="24" v-if="report.sugarAfter2 != null">
                餐后2h血糖： {{ report.sugarAfter2 }}
              </a-col>
              <a-col class="item" :span="24" v-if="report.hba1c != null"> HbA1c： {{ report.hba1c }} </a-col>
            </a-row>
          </div>
        </div>
        <div class="card_content" v-if="report.sugarCheckDate !== null && report.sugarCheckDate !== '——'">
          <div class="item">
            <span style="font-size: 16px;color: #000;">血脂检查</span>
          </div>
          <div>
            <a-row>
              <a-col class="item" :span="24" v-if="report.bloodFatCheckDate != null">
                总胆固醇TC检查日期： {{ report.bloodFatCheckDate }}
              </a-col>
              <a-col class="item" :span="24" v-if="report.tc != null"> 总胆固醇TC： {{ report.tc }} </a-col>
              <a-col class="item" :span="24" v-if="report.tg != null">甘油三酯TG： {{ report.tg }} </a-col>
              <a-col class="item" :span="24" v-if="report.ldlc != null">低密度脂蛋白LDL-C： {{ report.ldlc }} </a-col>
              <a-col class="item" :span="24" v-if="report.hdlc != null">高密度脂蛋白HDL-C： {{ report.hdlc }} </a-col>
              <a-col class="item" :span="24" v-if="report.nonHdlc != null"
                >非高密度脂蛋白nonHDL-C： {{ report.nonHdlc }}
              </a-col>
            </a-row>
          </div>
        </div>
        <div
          class="card_content"
          v-if="report.liverFunctionCheckDate !== null && report.liverFunctionCheckDate !== '——'"
        >
          <div class="item">
            <span style="font-size: 16px;color: #000;">肝功能检查</span>
          </div>
          <div>
            <a-row>
              <a-col class="item" :span="24" v-if="report.liverFunctionCheckDate !== null"
                >检查日期： {{ report.liverFunctionCheckDate }}
              </a-col>
              <a-col class="item" :span="24" v-if="report.alt !== null">谷丙转氨酶ALT： {{ report.alt }} </a-col>
              <a-col class="item" :span="24" v-if="report.ast !== null">谷草转氨酶AST： {{ report.ast }} </a-col>
              <a-col class="item" :span="24" v-if="report.tbil !== null">总胆红素T-BIL： {{ report.tbil }} </a-col>
              <a-col class="item" :span="24" v-if="report.alp !== null">碱性磷酸酶ALP： {{ report.alp }} </a-col>
            </a-row>
          </div>
        </div>
        <div
          class="card_content"
          v-if="report.kidneyFunctionCheckDate !== null && report.kidneyFunctionCheckDate !== '——'"
        >
          <div class="item">
            <span style="font-size: 16px;color: #000;">肾功能检查</span>
          </div>
          <div>
            <a-row>
              <a-col class="item" :span="24" v-if="report.kidneyFunctionCheckDate !== null"
                >检查日期： {{ report.kidneyFunctionCheckDate }}
              </a-col>
              <a-col class="item" :span="24" v-if="report.urineProtein !== null"
                >尿常规_尿蛋白： {{ report.urineProtein }}
              </a-col>
              <a-col class="item" :span="24" v-if="report.uae !== null">尿白蛋白UAE： {{ report.uae }} </a-col>
              <a-col class="item" :span="24" v-if="report.uae24 !== null"
                >24h尿白蛋白24hUAE： {{ report.uae24 }}
              </a-col>
              <a-col class="item" :span="24" v-if="report.acr !== null">尿白蛋白尿肌酐ACR： {{ report.acr }} </a-col>
              <a-col class="item" :span="24" v-if="report.cr !== null">血清肌酐Cr： {{ report.cr }} </a-col>
              <a-col class="item" :span="24" v-if="report.ureaNitrogen !== null"
                >尿素氮： {{ report.ureaNitrogen }}
              </a-col>
              <a-col class="item" :span="24" v-if="report.gfr !== null">肾小球滤过率GFR： {{ report.gfr }} </a-col>
              <a-col class="item" :span="24" v-if="report.creatinineRate !== null"
                >内生肌酐清除率： {{ report.creatinineRate }}
              </a-col>
              <a-col class="item" :span="24" v-if="report.bua !== null">血尿酸： {{ report.bua }} </a-col>
            </a-row>
          </div>
        </div>
        <div class="card_content" v-if="report.ketoneCheckDate !== null && report.ketoneCheckDate !== '——'">
          <div class="item">
            <span style="font-size: 16px;color: #000;">酮体检查</span>
          </div>
          <div>
            <a-row>
              <a-col class="item" :span="24" v-if="report.ketoneCheckDate !== null"
                >检查日期： {{ report.ketoneCheckDate }}
              </a-col>
              <a-col class="item" :span="24" v-if="report.bloodKetone !== null"
                >血酮体： {{ report.bloodKetone }}
              </a-col>
              <a-col class="item" :span="24" v-if="report.urineKetone !== null"
                >尿酮体： {{ report.urineKetone }}
              </a-col>
            </a-row>
          </div>
        </div>
        <div class="card_content" v-if="report.ogttCheckDate !== null && report.ogttCheckDate !== '——'">
          <div class="item">
            <span style="font-size: 16px;color: #000;">OGTT试验+胰岛功能</span>
          </div>
          <div>
            <span class="item">检查日期：{{ report.ogttCheckDate }}</span>
            <div class="chart">
              <div class="unit">单位：nmol/L</div>
              <bar-charts
                style="margin-bottom:30px"
                :xAxisData="xAsix"
                :seriesData="series"
                :legend="legend"
                :yAxisUnit="unit"
              ></bar-charts>
            </div>
            <div class="chart">
              <span class="unit">单位：mlU/L / nmol/L</span>
              <line-charts
                style="margin-bottom:30px"
                :x-axis-data="charts.axisData"
                :y-axis-unit="charts.axisUnit"
                :legend="charts.legend"
                :series-data="charts.seriesData"
                :position="charts.position"
              ></line-charts>
            </div>
          </div>
        </div>
        <div class="card_content" v-if="report.phCheckDate !== null && report.phCheckDate !== '——'">
          <div class="item">
            <span style="font-size: 16px;color: #000;">血气分析及其他</span>
          </div>
          <div>
            <a-row>
              <a-col class="item" :span="24" v-if="report.phCheckDate !== null"
                >检查日期： {{ report.phCheckDate }}
              </a-col>
              <a-col class="item" :span="24" v-if="report.ph !== null">血气分析PH： {{ report.ph }} </a-col>
              <a-col class="item" :span="24" v-if="report.hco3 !== null">血气分析HCO3： {{ report.hco3 }} </a-col>
              <a-col class="item" :span="24" v-if="report.na !== null">电解质（Na+）： {{ report.na }} </a-col>
              <a-col class="item" :span="24" v-if="report.kei !== null">电解质（K+）： {{ report.kei }} </a-col>
              <a-col class="item" :span="24" v-if="report.opp !== null">血浆渗透压： {{ report.opp }} </a-col>
              <a-col class="item" :span="24" v-if="report.ulcerativeDrugSensitivity !== null"
                >溃疡组织培养药敏试验： {{ report.ulcerativeDrugSensitivity }}
              </a-col>
            </a-row>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import barCharts from '../../components/barChart'
import lineCharts from '../../components/LineChart'
export default {
  name: 'Laboratory',
  props: ['report'],
  components: { barCharts, lineCharts },
  data() {
    return {
      xAsix: ['空腹服糖前', '30min', '1h', '2h', '3h'],
      series: [],
      legend: ['血糖'],
      unit: '',
      charts: {
        axisData: [],
        axisUnit: '',
        seriesData: [],
        legend: ['胰岛素', 'C肽'],
        position: {
          x: 'left',
          y: 'bottom'
        }
      }
    }
  },
  mounted() {
    this.series = [
      [0, Number(this.report.sugarLimosis.replace('mmol/L', ''))],
      [1, Number(this.report.sugar30min.replace('mmol/L', ''))],
      [2, Number(this.report.sugar1h.replace('mmol/L', ''))],
      [3, Number(this.report.sugar2h.replace('mmol/L', ''))],
      [4, Number(this.report.sugar3h.replace('mmol/L', ''))]
    ]
    this.charts.axisData = this.report.date
    this.charts.seriesData.push(this.report.value1)
    this.charts.seriesData.push(this.report.value2)
    console.log(this.charts.axisData)
    console.log(this.charts.seriesData)
  },
  methods: {}
}
</script>

<style lang="less" scoped>
// /deep/ .ant-descriptions-item-label {
//   width: 25% !important;
// }
// /deep/ .ant-descriptions-item-content {
//   width: 75% !important;
// }
.container {
  padding: 50px 24px 0 24px;
}
@media print {
  .container {
    page-break-inside: avoid;
  }
  .card_content {
    page-break-inside: avoid;
  }
}

.card_nd_title {
  margin-bottom: 30px;
  span {
    font-size: 16px;
    // padding-left: 10px;
    font-weight: bold;
    color: #000;
  }
}
.line {
  height: 6px;
  border-radius: 6px;
  // margin-left: 10px;
  background-color: #00b5d4;
  opacity: 0.3;
}
.content_box {
  column-count: 2;
  // display: flex;
  // flex-wrap: wrap;
  // justify-content: space-between;
}
// .left_box {
//   width: 45%;
//   display: flex;
//   flex-direction: column;
// }
// .right_box {
//   width: 45%;
//   display: flex;
//   flex-direction: column;
// }
.card_content {
  break-inside: avoid;
  // display: inline-block;
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ccc;
}
.item {
  margin-bottom: 20px;
}
.chart {
  position: relative;
}
.unit {
  position: absolute;
  left: 0;
  top: 5px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.55);
}
</style>

